<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2022-06-26 16:42:20
 * @LastEditors: Fishing yoo725@hotmail.com
 * @LastEditTime: 2022-12-22 20:11:30
-->
<template>
  <div>
    <div id="container_jiangsu_data" class="swiper_container"></div>

    <div id="swiper_container" class="swiper_container">
      <div class="swiper_wrapper">
        <div class="swiper_slide">
          <div id="container_data_1" class="line_chart on" />
        </div>
        <div class="swiper_slide">
          <div id="container_data_2" class="line_chart" />
        </div>
        <div class="swiper_slide">
          <div id="container_data_3" class="line_chart" />
        </div>
      </div>

      <div style="display: flex; justify-content: center; margin-bottom: 10px">
        <el-radio-group v-model="radio">
          <el-radio-button label="全国疫情/新增趋势" />
          <el-radio-button label="累计确诊/现有确诊" />
          <el-radio-button label="累计治愈/累计死亡" />
        </el-radio-group>
      </div>
    </div>

    <div id="real_container" style="height: calc(100vh / 2)" />
  </div>
</template>

<script>
import { get } from '@/utils/request'
import data from '@/data/data.json'
import { Alert } from 'element-ui'
export default {
  data() {
    return {
      date: [],
      confirm: [],
      total_confirm: [],
      suspect: [],
      heal: [],
      dead: [],
      severe: [],
      total_storeConfirm: [],
      radio: '全国疫情/新增趋势',
      // 江苏疫情
      jiangsu_name: [],
      jiangsu_confirm: [],
      jiangsu_suspect: [],
      jiangsu_heal: [],
      jiangsu_dead: [],
      jiangsu_severe: []
    }
  },
  watch: {
    radio: {
      handler(val) {
        this.changeChart(val)
      }
    }
  },
  mounted() {
    // 自动加载折线
    this.getData()
    this.load_jiangsu_charts()
    this.loadCharts_1()
    this.loadCharts_2()
    this.loadCharts_3()
    // 尝试
    // this.loadCharts_4()
  },
  methods: {
    changeList(arr) {
      var temp = arr[2]
      arr.splice(2, 1)
      arr.splice(12, 1)
      arr.splice(13, 2)
      arr.push(temp)
      console.log(arr[2])
    },
    getData() {
      // let res = await get('http://c.m.163.com/ug/api/wuhan/app/data/list-total')
      this.date = data.data.chinaDayList.map((item) => item.date)
      this.confirm = data.data.chinaDayList.map((item) => item.today.confirm)
      this.suspect = data.data.chinaDayList.map((item) => item.today.suspect)
      this.total_confirm = data.data.chinaDayList.map(
        (item) => item.total.confirm
      )
      this.total_storeConfirm = data.data.chinaDayList.map(
        (item) => item.total.storeConfirm
      )
      this.heal = data.data.chinaDayList.map((item) => item.total.heal)
      this.dead = data.data.chinaDayList.map((item) => item.total.dead)
      // 获取江苏疫情数据
      this.jiangsu_name = data.data.areaTree[2].children[19].children.map(
        (item) => item.name
      )
      this.jiangsu_confirm = data.data.areaTree[2].children[19].children.map(
        (item) => item.total.confirm
      )
      this.jiangsu_suspect = data.data.areaTree[2].children[19].children.map(
        (item) => item.total.suspect
      )
      this.jiangsu_heal = data.data.areaTree[2].children[19].children.map(
        (item) => item.total.heal
      )
      this.jiangsu_dead = data.data.areaTree[2].children[19].children.map(
        (item) => item.total.dead
      )
      this.jiangsu_severe = data.data.areaTree[2].children[19].children.map(
        (item) => item.total.severe
      )
      // 统一修正数据
      this.changeList(this.jiangsu_name)
      this.changeList(this.jiangsu_confirm)
      this.changeList(this.jiangsu_suspect)
      this.changeList(this.jiangsu_heal)
      this.changeList(this.jiangsu_dead)
      this.changeList(this.jiangsu_severe)
    },
    load_jiangsu_charts() {
      var chart = Highcharts.chart('container_jiangsu_data', {
        chart: {
          type: 'column'
        },
        title: {
          text: '江苏省疫情数据'
        },
        subtitle: {
          text: '数据来源: 网易新闻'
        },
        xAxis: {
          categories: this.jiangsu_name,
          crosshair: true
        },
        yAxis: {
          min: 0,
          title: {
            text: '人数 (人)'
          }
        },
        tooltip: {
          // head + 每个 point + footer 拼接成完整的 table
          headerFormat:
            '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat:
            '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y} 人</b></td></tr>',
          footerFormat: '</table>',
          shared: true,
          useHTML: true
        },
        plotOptions: {
          column: {
            borderWidth: 0
          }
        },
        series: [
          {
            name: '确诊',
            data: this.jiangsu_confirm
          },
          {
            name: '疑似',
            data: this.jiangsu_suspect
          },
          {
            name: '治愈',
            data: this.jiangsu_heal
          },
          {
            name: '死亡',
            data: this.jiangsu_dead
          },
          {
            name: '重症',
            data: this.jiangsu_severe
          }
        ]
      })
    },
    loadCharts_1() {
      var chart = Highcharts.chart('container_data_1', {
        chart: {
          type: 'line'
        },
        title: {
          text: '全国疫情新增趋势'
        },
        subtitle: {
          text: '数据来源: 网易新闻'
        },
        xAxis: {
          categories: this.date
        },
        yAxis: {
          title: {
            text: '数量（人）'
          }
        },
        plotOptions: {
          line: {
            dataLabels: {
              // 开启数据标签
              enabled: true
            }
            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            // enableMouseTracking: false
          }
        },
        // 鼠标移入提示，需要关闭鼠标追踪
        tooltip: {
          headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>',
          pointFormat:
            '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>',
          shared: true
        },
        series: [
          {
            name: '确诊',
            data: this.confirm
          },
          {
            name: '疑似',
            data: this.suspect
          }
        ]
      })
    },
    loadCharts_2() {
      var chart = Highcharts.chart('container_data_2', {
        chart: {
          type: 'line'
        },
        title: {
          text: '全国累计/现有确诊趋势'
        },
        subtitle: {
          text: '数据来源: 网易新闻'
        },
        xAxis: {
          categories: this.date
        },
        yAxis: {
          title: {
            text: '数量（人）'
          }
        },
        plotOptions: {
          line: {
            dataLabels: {
              // 开启数据标签
              enabled: true
            }
            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            // enableMouseTracking: false
          }
        },
        // 鼠标移入提示，需要关闭鼠标追踪
        tooltip: {
          headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>',
          pointFormat:
            '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>',
          shared: true
        },
        series: [
          {
            name: '累计确诊',
            data: this.total_confirm
          },
          {
            name: '现有确诊',
            data: this.total_storeConfirm
          }
        ]
      })
    },
    loadCharts_3() {
      var chart = Highcharts.chart('container_data_3', {
        chart: {
          type: 'line'
        },
        title: {
          text: '全国累计治愈/死亡趋势'
        },
        subtitle: {
          text: '数据来源: 网易新闻'
        },
        xAxis: {
          categories: this.date
        },
        yAxis: {
          title: {
            text: '数量（人）'
          }
        },
        plotOptions: {
          line: {
            dataLabels: {
              // 开启数据标签
              enabled: true
            }
            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            // enableMouseTracking: false
          }
        },
        // 鼠标移入提示，需要关闭鼠标追踪
        tooltip: {
          headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>',
          pointFormat:
            '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>',
          shared: true
        },
        series: [
          {
            name: '累计治愈',
            data: this.heal
          },
          {
            name: '累计死亡',
            data: this.dead
          }
        ]
      })
    },
    loadCharts_4() {
      Highcharts.setOptions({
        global: {
          useUTC: false
        }
      })
      function activeLastPointToolip(chart) {
        var points = chart.series[0].points
        chart.tooltip.refresh(points[points.length - 1])
      }
      var chart = Highcharts.chart('real_container', {
        chart: {
          type: 'spline',
          marginRight: 10,
          events: {
            load: function () {
              var series = this.series[0]
              var chart = this
              activeLastPointToolip(chart)
              setInterval(function () {
                var x = new Date().getTime() // 当前时间
                var y = Math.random() // 随机值
                series.addPoint([x, y], true, true)
                activeLastPointToolip(chart)
              }, 1000)
            }
          }
        },
        title: {
          text: '动态模拟实时数据'
        },
        xAxis: {
          type: 'datetime',
          tickPixelInterval: 150
        },
        yAxis: {
          title: {
            text: null
          }
        },
        tooltip: {
          formatter: function () {
            return (
              '<b>' +
              this.series.name +
              '</b><br/>' +
              Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +
              '<br/>' +
              Highcharts.numberFormat(this.y, 2)
            )
          }
        },
        legend: {
          enabled: false
        },
        series: [
          {
            name: '随机数据',
            data: (function () {
              // 生成随机值
              var data = []
              var time = new Date().getTime()
              var i
              for (i = -19; i <= 0; i += 1) {
                data.push({
                  x: time + i * 1000,
                  y: Math.random()
                })
              }
              return data
            })()
          }
        ]
      })
    },
    changeChart(val) {
      console.log('change' + val)
      for (
        var i = 0;
        i < document.getElementsByClassName('line_chart').length;
        i++
      ) {
        document.getElementsByClassName('line_chart')[i].style.display = 'none'
        if (val === '全国疫情/新增趋势') {
          document.getElementsByClassName('line_chart')[0].style.display =
            'block'
        } else if (val === '累计确诊/现有确诊') {
          document.getElementsByClassName('line_chart')[1].style.display =
            'block'
        } else if (val === '累计治愈/累计死亡') {
          document.getElementsByClassName('line_chart')[2].style.display =
            'block'
        }
      }
    }
  }
}
</script>

<style scoped>
.swiper_container {
  margin: 0 auto;
  margin-bottom: 10px;
  border: 1px solid gray;
  border-radius: 5px;
}

.line_chart {
  display: none;
}

.on {
  display: block;
}

.transition-box {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 40px 20px;
  margin-right: 20px;
  margin-bottom: 10px;
  color: #fff;
  text-align: center;
  background-color: #409eff;
  border-radius: 4px;
}
</style>
